<template>
  <div class="main">
    <all-header :title="$route.meta.title"></all-header>
    <div class="con" v-if="collectionDetail">
      <div class="top">
        <div class="top_left">
          <img :src="setting.file_url + collectionDetail.photo" alt="" />
          <div class="name">
            <div class="title">{{ collectionDetail.name }}</div>
            <div class="pu">
              <img :src="setting.file_url + collectionDetail.avatar" alt="" />
              <div class="pu_name">{{ collectionDetail.username }}</div>
            </div>
          </div>
        </div>
        <div class="right">
          <img src="../../assets/image/my/mores.png" alt="" />
        </div>
      </div>
      <div class="text">
        <div class="item">
          <div class="left">作品编号</div>
          <div class="right">{{ collectionDetail.no }}</div>
        </div>
        <div class="item">
          <div class="left">商品类型</div>
          <div class="right">{{ collectionDetail.no }}</div>
        </div>
        <div class="item">
          <div class="left">专辑</div>
          <div class="right">{{ collectionDetail.album }}</div>
        </div>
        <div class="item">
          <div class="left">当前售价</div>
          <div class="right">{{ collectionDetail.price }}</div>
        </div>
        <div class="item">
          <div class="left">买入时间</div>
          <div class="right">{{ collectionDetail.seller_time }}</div>
        </div>
        <div class="item">
          <div class="left">买入时间</div>
          <div class="right">{{ collectionDetail.seller_time }}</div>
        </div>
        <div class="item">
          <div class="left">买入价格</div>
          <div class="right">{{ collectionDetail.seller_price }}</div>
        </div>
        <div class="item">
          <div class="left">链上标识</div>
          <div class="right">{{ fun.addr(collectionDetail.wallet_addr) }}</div>
        </div>
        <div class="item">
          <div class="left">状态</div>
          <div class="right">
            {{ marketStatus(collectionDetail.market_status) }}
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="bottom-right">
          <van-button
            type="default"
            v-if="collectionDetail.market_status == 4"
            @click="cancelPublish"
            >取消寄售</van-button
          >
          <van-button
            type="default"
            v-if="
              collectionDetail.market_status == 3 && collectionDetail.allow_give
            "
            @click="giveShow = true"
            >赠与</van-button
          >
          <van-button
            type="default"
            v-if="
              collectionDetail.type == 4 &&
              collectionDetail.market_status == 3 &&
              !collectionDetail.blind_box_id
            "
            >开启盲盒</van-button
          >
          <van-button
            type="default"
            v-if="
              collectionDetail.market_status == 3 && collectionDetail.allow_sale
            "
            @click="showSale"
            >藏品寄售</van-button
          >
        </div>
      </div>
    </div>

    <van-action-sheet v-model:show="giveShow" title="转赠">
      <div class="content">
        <van-cell-group inset>
          <van-field
            v-model="address"
            center
            clearable
            placeholder="请输入对方区块链地址"
          >
            <template #button>
              <van-button size="small" type="primary" @click="query"
                >点我查询</van-button
              >
            </template>
          </van-field>
        </van-cell-group>

        <div class="userinfo" v-if="queryUserInfo">
          <img :src="setting.file_url + queryUserInfo.avatar" alt="" />
          <div class="info">
            <div class="name">{{ queryUserInfo.name }}</div>
            <div class="addrass">{{ queryUserInfo.wallet_addr }}</div>
          </div>

          <div class="tag">受赠人信息</div>
        </div>
        <div class="button_group" v-if="queryUserInfo">
          <van-button size="large" @click="giveShow = false">取消</van-button>
          <van-button size="large" plain type="primary" @click="toGive"
            >转赠</van-button
          >
        </div>
      </div>
    </van-action-sheet>

    <van-action-sheet v-model:show="sellShow" title="寄售">
      <div class="content">
        <van-cell-group inset>
          <van-field
            v-model="goodsprice"
            center
            clearable
            placeholder="请输入发布价格"
          >
            <template #button> </template>
          </van-field>
        </van-cell-group>

        <div class="button_group">
          <van-button size="large" @click="sellShow = false">取消</van-button>
          <van-button size="large" plain type="primary" @click="toPublish"
            >寄售</van-button
          >
        </div>
      </div>
    </van-action-sheet>

    <pay-pass :show="payPassShow" @close="payPassClose" />
  </div>
</template>

<script setup>
import marketStore from "../../store/market";
import { computed, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import commonStore from "../../store/common";
import userStore from "../../store/user";
import { Toast, Dialog } from "vant";
import fun from "../../assets/fun.js";

const common = commonStore();
let setting = computed(() => common.setting);

const marketStatus = (data) => {
  switch (data) {
    case 0:
      return "付款中";
    case 3:
      return "待售";
    case 4:
      return "在售";
    case 5:
      return "上链中";
    case 6:
      if (data.value.blind_box_id) {
        return "开盲盒";
      }
      if (data.value.type == 4) {
        return "盲盒已开启";
      }
      return "以合成";
    case 7:
      return "上链中";
  }
};

// 获取藏品详情
const market = marketStore();
const route = useRoute();
const id = route.params.id;
let collectionDetail = ref("");
const getDetail = () => {
  market.getCollectionDetail({ id: id }).then((res) => {
    collectionDetail.value = res;
    Toast.clear();
  });
};

// 查询
const user = userStore();
let giveShow = ref(false);
let address = ref("");
let queryUserInfo = ref("");
const query = () => {
  if (!address.value) {
    return Toast.fail("请填写链地址");
  }
  Toast.loading({
    message: "加载中...",
    forbidClick: true,
  });
  user
    .user({ id: address.value })
    .then((res) => {
      queryUserInfo.value = res;
      Toast.clear();
    })
    .catch(() => {
      Toast.clear;
    });
};
// 开始转赠
let payPassShow = ref(false);
const toGive = () => {
  Dialog.confirm({
    title: "风险提示",
    confirmButtonText: "确定赠与",
    confirmButtonColor: "#343332",
    message:
      "请认真核对帐户信息，一旦赠与对方将无法撤回，务必谨慎操作，若因操作失误造成损失平台概不负责，请知晓。",
  })
    .then(() => {
      payPassShow.value = true;
    })
    .catch(() => {});
};

// 输入完密码执行转赠操作
const router = useRouter();
const payPassClose = (data) => {
  payPassShow.value = false;
  if (data) {
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
    });
    market
      .give({ id: id, addr: address.value, pay_password: data })
      .then(() => {
        Toast.success("转赠成功");
        giveShow.value = false;
        setTimeout(() => {
          router.back();
        }, 2000);
      })
      .catch(() => {
        giveShow.value = false;
      });
  }
};

// 寄售
let sellShow = ref(false);
let goodsprice = ref("");
const showSale = () => {
  goodsprice.value = collectionDetail.value.price;
  sellShow.value = true;
};
const toPublish = () => {
  if (goodsprice.value <= 0 && goodsprice.value == "") {
    return Toast.fail("请输入寄售价格");
  }
  Toast.loading({
    message: "加载中...",
    forbidClick: true,
  });
  market
    .marketUpdate({ id: id, status: 4, price: goodsprice.value })
    .then(() => {
      Toast.success("操作成功");
      collectionDetail.value.market_status = 4;
      collectionDetail.value.price = goodsprice.value;
      sellShow.value = false;
    })
    .catch(() => {
      Toast.clear();
    });
};

// 取消寄售
const cancelPublish = () => {
  Dialog.confirm({
    title: "操作提示",
    message: "确认取消该商品寄售？",
    cancelButtonText: "关闭",
    confirmButtonText: "确定取消",
    confirmButtonColor: "#343332",
  })
    .then(() => {
      market
        .marketUpdate({ id: id, status: 3 })
        .then(() => {
          Toast.success("操作成功");
          collectionDetail.value.market_status = 3;
        })
        .catch(() => {
          Toast.fail("操作失败, 请检查网络");
        });
    })
    .catch(() => {
      return;
    });
};

watch(giveShow, (newVal) => {
  if (!newVal) {
    payPassShow.value = false;
  }
});

const onLoad = () => {
  Toast.loading("加载中...");
  getDetail();
};
onLoad();
</script>

<style lang="scss" scoped>
.main {
  padding-top: 1.3462rem;
}
.con {
  padding: 0.3846rem;
  width: 77%;
  border-radius: 0.3846rem;
  box-shadow: 0.0962rem 0.0962rem 0.3846rem 0.1923rem #f3f5f6;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .name {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 1.1538rem;
    padding: 0.1923rem;
    .title {
      font-size: 0.3846rem;
      font-weight: bold;
    }
  }
  .top_left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    img {
      width: 1.3462rem;
      height: 1.3462rem;
      border-radius: 0.1923rem;
      margin-right: 0.0962rem;
    }

    .pu {
      display: flex;
      align-items: center;
      font-size: 0.2308rem;
      color: #959595;
      img {
        width: 0.3846rem;
        height: 0.3846rem;
        border-radius: 0;
      }
    }
  }

  .right {
    img {
      width: 0.3846rem;
      height: 0.3846rem;
    }
  }
}
.text {
  padding-bottom: 0.3846rem;
  padding-top: 0.3846rem;
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.3846rem;

    .left {
      font-weight: bold;
      font-size: 0.2885rem;
      color: #959595;
    }
    .right {
      font-weight: bold;
      font-size: 0.25rem;
    }
  }
}
.bottom {
  display: flex;
  justify-content: end;
  padding-top: 0.3846rem;
  .van-button--default {
    background: black;
    color: black;
    border: solid 0.0192rem black;
    color: white;
    border-radius: 0.1923rem;
    margin-left: 0.1923rem;
  }
}

.userinfo {
  display: flex;
  align-items: center;
  justify-content: start;
  background-color: #f4f4f4;
  padding: 0.1923rem;
  width: 75%;
  transform: translateX(-50%);
  margin-left: 50%;
  border-radius: 0.1923rem;
  margin-bottom: 0.3846rem;
  border: solid 0.0385rem #303557;
  position: relative;

  .tag {
    background-color: #303557;
    color: white;
    padding: 0.0962rem;
    position: absolute;
    top: -0.0385rem;
    right: -0.0385rem;
    border-top-right-radius: 0.1923rem;
    border-bottom-left-radius: 0.1923rem;
    font-size: 0.0962rem;
  }

  .addrass {
    width: 3.8462rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .name {
    font-weight: bold;
    font-size: 0.3269rem;
  }

  img {
    width: 0.9615rem;
    height: 0.9615rem;
    border-radius: 50%;
    margin-right: 0.3846rem;
  }
}

.infoLoading {
  transform: translateX(-50%);
  margin-left: 50%;
}

.van-cell-group {
  padding: 0.3846rem;
  .van-cell {
    background-color: #f4f4f4;
    border-radius: 0.1923rem;
    .van-button {
      background-color: #f4f4f4;
      border: none;
      color: black;
      font-weight: bold;
    }
  }
}

.button_group {
  padding: 0.3462rem;
  padding-top: 0rem;
  display: flex;
  justify-content: space-around;
  .van-button {
    border-radius: 0.1923rem;
    width: 38%;
    background-color: black;
    color: white;
    border: black;
  }
  .van-button--default {
    background: white;
    color: black;
    border: solid 0.0192rem black;
  }
}
</style>